import React, { useState } from 'react';
import { Table, Tag, Space, Layout, PageHeader, Button, Modal, Form, Input, Switch, message } from 'antd';
// import { useDispatch } from 'react-redux'
import { addUser, deleteUser } from '@/api/user';

import { UserProps } from '@/types/userTypes';
import { useUserList } from '@/hooks/useUser';


const User: React.FC = (props: any) => {
    const [show, setShow] = useState(false);
    const [form] = Form.useForm();
    let [key, setKey] = useState(0)
    const [users, setUsers] = useUserList(key);
    const columns = [
        {
            title: '用户名(账号)',
            dataIndex: 'username',
            key: 'username',
            render: (text: UserProps) => <a>{text}</a>,
        },
        {
            title: '用户状态',
            key: 'status',
            render: (text: UserProps) => <div>{text.status === 1 ? '启用' : '禁用'}</div>
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '备注',
            key: 'userDesc',
            dataIndex: 'userDesc',
        },
        {
            title: '操作',
            key: 'action',
            render: (text: UserProps, record: any) => {
                const deleteItem = async () => {
                    const res = await deleteUser(text);
                    if (res.code === 0) {
                        setKey(++key);
                    }
                }
                return <Space size="middle">
                    <a onClick={deleteItem}>删除</a>
                </Space>
            },
        },
    ];
    const onChange = (values: any) => {

    }
    // 添加
    const handleOk = () => {
        form.submit();
    }
    const handleCancel = () => setShow(false);

    const onFinish = async (values: UserProps) => {

        const res = await addUser(values);
        console.log(res);
        setKey(++key);
        setShow(false);
    }
    const onFinishFailed = (values: any) => {

    }
    return (
        <Layout className='user-layout'>
            <PageHeader
                className="site-page-header"
                ghost={false}
                title="用户管理"
                subTitle="用户管理中心"
                avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
                extra={[
                    <Button key="1" type='primary' onClick={() => setShow(true)}>创建用户</Button>
                ]}
            >
            </PageHeader>
            <div className='user-container'>
                <Table rowKey="_id" columns={columns} dataSource={users as UserProps[]} onChange={onChange} />
            </div>
            <Modal title="创建用户" visible={show} onOk={handleOk} onCancel={() => setShow(false)}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="用户状态"
                        name="status"
                        rules={[{ required: true, message: '请选择用户状态!' }]}
                    >
                        <Switch checkedChildren="启用" unCheckedChildren="禁用" />
                    </Form.Item>
                    <Form.Item
                        label="备注"
                        name="userDesc"
                        rules={[{ required: true, message: '请输入备注信息!' }]}
                    >
                        <Input.TextArea />
                    </Form.Item>
                </Form>
            </Modal>
        </Layout>
    )
}

// class User extends Component {

//     async componentDidMount() {

//         const res = await fetchList({});
//     }
//     render(): React.ReactNode {
//         return <Table columns={columns} dataSource={data} />
//     }
// }


export default User; 
